<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>佐心，教家长做父母</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
	<c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link rel="stylesheet" href="${ctx}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${ctx}/assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="${ctx}/assets/css/index.css?v=2.3">
    <script>
    	var pingguId='${param.flag}';
    	var temp="";
    	var baifen=0;
    	var questionCount=0;
    </script>
</head>
<body class="bg-white">
<header data-am-widget="header" class="am-header am-header-default am-header-fixed am-border-bottom">
    <div class="am-header-left am-header-nav">
        <a  id="btn_back"> <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
    </h1>

    <div class="am-header-right am-header-nav">
        <a id="btnfeedback">
            <i class="icon_63"></i>
        </a>
    </div>
</header>
<section class="am-padding-bottom-sm" id="amz-main" data-tag="css-nav">
    <div class=" am-container">
        <div class="question_list">
           
        </div>
    </div>


</section>

<footer data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bg-white border-0">
    <div class="am-container box">

        <div class="box-1 padding-top-18" >
            <!--进度条-->
            <div class="am-progress am-progress-striped am-progress-sm am-active border-radius-15" >
                <div class="am-progress-bar am-progress-bar-secondary" id="jindu" style="width:0%"></div>
            </div>
        </div>

        <div  class="font-color-13 am-text-center width-60px" id="bili"></div>
        <div  class="am-text-right width-50px">
           <a href="javascript:void(0);" onclick="confirmPinggu()"><span class="btn-9">提交</span></a>
        </div>
    </div>


</footer>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">问题反馈</div>
        <div class="am-modal-bd">
            <textarea rows="3" class="mark_content am-modal-prompt-input" id="tocaocontent" placeholder="对本产品有什么建议，敬请告知，谢谢！"></textarea>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>提交</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">佐心科技</div>
        <div class="am-modal-bd">
            真的放弃当前评估吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm2">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">佐心科技</div>
        <div class="am-modal-bd">
            请填完整评估问卷
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm3">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">佐心科技</div>
        <div class="am-modal-bd">
           请输入吐槽内容
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm4">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">佐心科技</div>
        <div class="am-modal-bd">
           感谢您的热心回馈，谢谢!
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<script src="${ctx}/assets/js/jquery.min.js"></script>
<script src="${ctx}/assets/js/amazeui.min.js"></script>
<script>
	function confirmPinggu(){
		var score=0;
		for(var i=1;i<=questionCount;i++){
			var qid="question"+i;
			var val=$("#"+qid+"").find(".am-u-sm-6").find(".cur").next().next().val();
			if(val==undefined){
				$('#my-confirm2').modal({
                     relatedTarget: this,
                     onConfirm: function(options) {
                     },
                     // closeOnConfirm: false,
                     onCancel: function() {

                     }
                });
				return false;
			}
			score+=parseInt(val);
		}
		location.href="${ctx}/tijiaoPinggu?pingguId="+pingguId+"&score="+score;
	}
	
	function percentNum(num, num2) { 
     return (Math.round(num / num2 * 10000) / 100.00 + "%"); //小数点后两位百分比
	}
	
    $(function () {
    
    	var baseResponse=$.ajax({url:"${ctx}/getPingguTiMu?pingguId="+pingguId,async:false});
    	var pingguJson=JSON.parse(baseResponse.responseText);
		if(pingguJson.resultCode=="0"){
			var pingguQuestion=pingguJson.pinggu.question.split(",");
			questionCount=pingguQuestion.length;
			$("#bili").text("0/"+pingguQuestion.length);
			$(".am-header-title").text(pingguJson.pinggu.pingguTitle);
			var html="";
			for(var i=0;i<pingguQuestion.length;i++){
				html+="<div class='question_item bg-gray font-color-13 am-padding-sm padding-bottom-0'>";
	                //<!--题目-->
	            html+="    <div class='border-bottom padding-bottom-10px box'>";
	            html+="        <div class='margin-left-fu5'><span class='bianhao am-margin-right-xs'>"+(i+1)+"</span></div>";
	            
	            var questionId=pingguQuestion[i];
	            var questionResponse=$.ajax({url:"${ctx}/getQuestion?questionId="+questionId,async:false});
	            var questionJson=JSON.parse(questionResponse.responseText);
	            html+="        <div class='box-1 padding-top-2'><span>"+questionJson.question.questionName+"</span></div>";
	            html+="    </div>";
	                //<!--答案-->
	            var qid="question"+(i+1);
	            html+="    <div class='am-g am-g-fixed font-14' id='"+qid+"'>";
	            html+="        <div class='am-u-sm-6 am-padding-bottom-sm am-padding-top-sm'><i class='icon-select '></i><span>十分符合</span><input type='hidden' value='"+questionJson.question.ascore+"'></div>";
	            html+="<div class='am-u-sm-6 am-padding-bottom-sm am-padding-top-sm'><i class='icon-select'></i><span>符合</span><input type='hidden' value='"+questionJson.question.bscore+"'></div>";
	            html+="        <div class='am-u-sm-6 am-padding-bottom-sm am-padding-top-sm'><i class='icon-select'></i><span>不符合</span><input type='hidden' value='"+questionJson.question.cscore+"'></div>";
	            html+="        <div class='am-u-sm-6 am-padding-bottom-sm am-padding-top-sm'><i class='icon-select'></i><span>十分不符合</span><input type='hidden' value='"+questionJson.question.dscore+"'></div>";
	            html+="    </div>";
	            html+="</div>";
			}
			
			$(".question_list").html(html);
		}
    
        $('#btnfeedback').on('click', function () {
            $('#my-prompt').modal({
                relatedTarget: this,
                onConfirm: function (e) {
                    var msg=e.data;
                    if(""==msg){
                		$('#my-confirm3').modal({
                     relatedTarget: this,
                     onConfirm: function(options) {
                     },
                     // closeOnConfirm: false,
                     onCancel: function() {

                     }
                });
                		return false;
                	}
                    var gotoTuCao=$.ajax({url:"${ctx}/gotoTuCao?content="+e.data,async:false});
				    var gotoTuCaoJson=JSON.parse(gotoTuCao.responseText);
				    if(gotoTuCaoJson.resultCode=="0"){
				    	$('#my-confirm4').modal({
		                     relatedTarget: this,
		                     onConfirm: function(options) {
		                     },
		                     // closeOnConfirm: false,
		                     onCancel: function() {
		
		                     }
                		});
				    }
                },
                onCancel: function (e) {
//                    alert('不想说!');
                }
            });
        });


        $(".question_list .question_item ").each(function(index,item){
            $(item).find(".am-u-sm-6").bind("click",function(){
              var ctlselect=$(this).find("i");
               $(item).find("i").removeClass("cur");
                ctlselect.addClass("cur");
            });
        });

		Array.prototype.S=String.fromCharCode(2);
		Array.prototype.in_array=function(e)
		{
		var r=new RegExp(this.S+e+this.S);
		return (r.test(this.S+this.join(this.S)+this.S));
		}

		$(".am-g").on('click', function() {
			var texts=$(this).prev().find(".bianhao").text();
			
			var temps=temp.split(",");
			if(temps.in_array(texts)==false){
				temp+=texts+",";
			}
			temps=temp.split(",");
			baufen=temps.length-1;
			for(var i=1;i<=questionCount;i++){
				if(baufen==i){
					$("#jindu").width(percentNum(i,questionCount));
					$("#bili").text(i+"/"+questionCount);
				}
			}
			
		});

        $("#btn_back").on('click', function() {
                    $('#my-confirm').modal({
                        relatedTarget: this,
                        onConfirm: function(options) {
                          history.go(-1);
                        },
                        // closeOnConfirm: false,
                        onCancel: function() {

                        }
                    });
                });

    });
</script>
</body>
</html>